@import '../components/NavigationComponents/NavigationItem/index.module.scss';
@import '../components/NavigationComponents/NavigationSection/index.module.scss';

.title {
  @extend %navigation-item--with-bullet;
  @extend %navigation-section-title;

  padding-bottom: 0;

  &::before,
  &:hover::before {
    box-shadow: inset 0 0 0 3px var(--color-text-primary);
  }

  > svg {
    color: var(--color-text-secondary);
    height: 14px;
    padding: 0 var(--space-24) 0 0;
  }

  &--done::before {
    content: $checkSvg;
  }

  &--done::before,
  &--done:hover::before {
    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
  }
}

.item {
  @extend %navigation-item--with-bullet;
  @extend %navigation-item--with-trail;

  &--done::before {
    content: $checkSvg;
  }

  &--done::before,
  &--active::before {
    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
  }

  &--done::after {
    background: var(--color-border-accent);
  }
}
